<template>
  <view>
    <uni-card>
      <uni-row>
        <uni-col span="4">
          <view class="tp"></view>
        </uni-col>
        <uni-col span="20">
          <view class="characters">预约入园时间</view>
          <view class="charactersone">2024年9月19日  9:00-11:00</view>
        </uni-col>
      </uni-row>
    </uni-card>
    <view class="yuyue">
      <text class="yuyue-text">预约信息</text>
    </view>
    <uni-card>
      <view class="msg">
        团体名称<span style="color: red;">*</span>:
      </view>
      <view><uni-easyinput class="kuang" placeholder="请输入团体名称" v-model="tid"></uni-easyinput></view>
      <view class="msg">
        团体人数<span style="color: red;">*</span>:
      </view>
      <view><uni-easyinput class="kuang" placeholder="请输入团体人数" v-model="ttnum"></uni-easyinput></view>
    </uni-card>
    <view class="yuyue">
      <text class="yuyue-text">团体负责人1</text>
    </view>
    <view>
      <uni-card>
        <view class="msg">
          姓名<span style="color: red;">*</span>:
        </view>
        <view>
          <uni-easyinput placeholder="请输入预约人姓名" v-model="name" @change="change1"></uni-easyinput>
        </view>
        <view class="msg">
          证件类型<span style="color: red;">*</span>:
        </view>
        <view>
          <uni-data-select v-model="value" :localdata="range" @change="change">
          </uni-data-select>
        </view>
        <view class="msg">
          证件号码<span style="color: red;">*</span>:
        </view>
        <view>
          <uni-easyinput placeholder="请输入证件号码" v-model="idnum"></uni-easyinput>
        </view>
        <view class="msg">
          手机号码<span style="color: red;">*</span>:
        </view>
        <view>
          <uni-easyinput placeholder="请输入手机号码" v-model="pnum"></uni-easyinput>
        </view>
      </uni-card>
    </view>
    <view>
      <view v-for="(person, index) in persons" :key="index" class="info-box">
        <uni-row>
          <uni-col span="9">
            <view class="yuyue">
              <text class="yuyue-text">团体负责人 {{ index + 2 }}</text>
            </view>
          </uni-col>
          <uni-col span="15">
            <button class="shanchu" @click="removePerson(index)"><image class="shanchupng" src="../../static/shanchu.png"></image></button>
          </uni-col>
        </uni-row>
        <view>
          <uni-card>
            <view class="msg">
              姓名<span style="color: red;">*</span>:
            </view>
            <view>
              <uni-easyinput v-model="person.name" placeholder="请输入预约人姓名"></uni-easyinput>
            </view>
            <view class="msg">
              证件类型<span style="color: red;">*</span>:
            </view>
            <view>
              <uni-data-select v-model="value" :localdata="range" @change="change">
              </uni-data-select>
            </view>
            <view class="msg">
              证件号码<span style="color: red;">*</span>:
            </view>
            <view>
              <uni-easyinput v-model="person.idNumber" placeholder="请输入证件号码"></uni-easyinput>
            </view>
            <view class="msg">
              手机号码<span style="color: red;">*</span>:
            </view>
            <view>
              <uni-easyinput v-model="person.phoneNumber" placeholder="请输入手机号码"></uni-easyinput>
            </view>
          </uni-card>
        </view>
      </view>
      <button @click="addPerson">添加同行人</button>
    </view>

    <view>
      <view class="tp1"></view>
    </view>
    <view class="msg3-text">
      <text class="msg3">最多可预约成人4人，儿童3人</text>
    </view>
    <view>
		<navigator :url="'/pages/ttpinzheng/ttpinzheng?item='+ encodeURIComponent(JSON.stringify(item))">
			<button class="bu">
				<text class="msg2">提交预约</text>
			</button>
		</navigator>
    </view>
  </view>
</template>
<script setup>
	import { ref, reactive,} from 'vue';
	let tid=ref('');
	let ttnum=ref('');
	let name=ref('');
	let idnum=ref('');
	let pnum=ref('');
	let value = ref('');
	let item = ref({
		tid: tid.value,
		ttnum: ttnum.value,
		name: name.value,
		idnum: idnum.value,
		pnum: pnum.value,
		value: value.value
	}); 
	console.info(item);
	console.log("name:"+name)
	const range = [
		{ value: 0, text: "中国居民身份证" },
		{ value: 1, text: "港澳台居民身份证" },
		{ value: 2, text: "外籍居民身份证" },
	];
	const notes = [
		{ value: 0, text: "同行人有6周岁（含）以下货身高1.2米（含）以下儿童，只需选择儿童数。" },
	];
	const persons = reactive([]);
	const change = (e) => {
		console.log("e:", e);
	};
	const change1 = () => {
		console.log("name:" + name);
	};
	const onIdTypeChange = (index, e) => {
		persons[index].idTypeIndex = e.detail.value;
	};
	const addPerson = () => {
		persons.push({
			name: '',
			idTypeIndex: 0,
			idNumber: '',
			phoneNumber: ''
		});
	};
	const removePerson = (index) => {
		persons.splice(index, 1);
	};
</script>

<style scoped>
.tp{
  width: 38px;
  height: 38px;
  background-image: url("../../static/wzjyy.png");
  margin-top: 7%;
}
.tp1{
  margin-left: 14px;
  width: 18px;
  height: 16px;
  background-image: url("../../static/wzjgth.png");
  mix-blend-mode: multiply;
  margin-top: 10px;
}
.characters{
  width: 72px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  letter-spacing: 0;
}
.charactersone{
  width: 400px;
  height: 25px;
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  margin-top: 2%;
}
.yuyue{
  text-align: left;
  margin-left: 18px;
  margin-top: 20px;
}
.yuyue-text{
  font-family: PingFangSC-Medium;
  font-weight: bold;
  font-size: 15px;
  color: #000000;
  letter-spacing: 1px;
}
.msg{
  margin-top: 3%;
  margin-bottom: 2%;
}
.msg2{
  width: 68px;
  height: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: 0;
}
.msg3{
  margin-left: 32px;
  width: 159px;
  height: 16px;
  opacity: 0.75;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #323232;
  letter-spacing: 0;
}
.msg3-text{
  margin-top: -21px;
}
.bu{
  width: 351px;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
  margin-top: 5%;
}
.info-box {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}
.shanchu{
	  height: 35px;
	  width: 12px;
	  margin-top: 10px;
	  margin-left: 200px;
	  background-color: unset;
	  
	}
.shanchupng{
	  width: 18px;
	  height: 18px;
	  margin-left: -6px;
	}
</style>